<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  <%@ page import="java.util.*" %>
<%@ page import="BeenChina.PM.Model.*" %>
<%@ page import="com.opensymphony.xwork2.util.*" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
	<title>Data Browser</title>	
	<jsp:include page="../basePage/head.jsp" />
	<link rel="stylesheet" href="./css/mainPage.css" />
	<script src="./js/json/json2.js" type="text/javascript"></script>
	<script src="./js/cookie/jquery.cookie.js" type="text/javascript"></script>	
	
	<style>
		.userrange{float:right;
			line-height:50px;		    
		 	font-size:15px;
		    font-weight: 600;
		 	vertical-align:middle;		 
		 	color:	#2779aa
		 }
		 .help{margin-left:10px; margin-right:10px}
		 .changePass{margin-left:10px; margin-right:10px}	
		 .logout{margin-left:10px; margin-right:10px}		 
		 .user {color:blue;margin-right:10px }
		 .welcom{margin-right:8px}
		 /* .split{font-size:18px;} */
	</style>
	<script>
	$(function() {			
		
		$.cookie.json = true;	
	
		var userid='${user.userID}';
		var cookie_current_item= $.cookie(userid+"_"+"current_accordion_item");
	    var cur_accordion_item= cookie_current_item ==null ? $("#accordion>h3:last").index("#accordion>h3") : cookie_current_item.index;	    
		var $accordion = $( "#accordion" ).accordion({active : cur_accordion_item * 1
			,heightStyle:'fill', collapsible: true}),
				
		$tabs = $( "#tabs" ).tabs({heightStyle: "fill"}).hide();
		$ctr=$("#ctr").hide();
		
		// show wellcom jsp add 20130608		 
		addWellcom();
		function addWellcom(){
			
			var id = "wellcom";
			var url = "wellcom.action";
			var label ="公告";
			
   			var tabTemplate = "<li id='#{id}'><a href='#{href}'' >#{label}</a> </li>";
   			$tabs.show();
   			$ctr.show();
       		li = $( tabTemplate.replace( /#\{id\}/g, 'tabs-' + id).replace( /#\{href\}/g, "#content" + id ).replace( /#\{label\}/g, label ) );
       		$tabs.find( ".ui-tabs-nav" ).append( li );
       		$tabs.append( "<iframe id='content" + id + "' src='"+ url + "' frameborder='0' style='left:0px;top:0px;height:100%;width:100%; margin:0;padding:0;' height='100%' width='100%' />" );
       		$tabs.tabs( "refresh" );
       		$tabs.tabs({ active: $("#tabs-" + id ).index()});
       		
       		changehelppage(id,label);
   		}		
		//
		
   		function addTab(id,url,label){
   			var tabTemplate = "<li id='#{id}'><a href='#{href}'' >#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
   			$tabs.show();
   			$ctr.show();
       		li = $( tabTemplate.replace( /#\{id\}/g, 'tabs-' + id).replace( /#\{href\}/g, "#content" + id ).replace( /#\{label\}/g, label ) );
       		$tabs.find( ".ui-tabs-nav" ).append( li );
       		$tabs.append( "<iframe id='content" + id + "' src='"+ url + "' frameborder='0' style='left:0px;top:0px;height:100%;width:100%; margin:0;padding:0;' height='100%' width='100%' />" );
       		$tabs.tabs( "refresh" );
   		}
		$tabs.delegate( "span.ui-icon-close", "click", function() {			
			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
			$( "#" + panelId ).remove();
			$tabs.tabs( "refresh" );
			if ($("#tabs li").length==0)
			{
				$tabs.hide();
				$ac=$("#ac").show();
				$("#ctr").css("left","180px");
				 $("#tabc").css("left","190px");
				//$ctr.hide();				
				 
			}else if ($("#tabs li").length==1){
				changehelppage(0,'');
			}
			
		});
		 
		
		//$("[href='#']").click(function(event) {
		$("#accordion a").click(function(event) {
     			//var jspPage=$(this).find("input:first-child").val();
    			var jspPage=$(this).attr("href");
    			var label = $(this).text();
    			//var id=$(this).find("input:first-child").attr("id");
    			var id=$(this).attr("id");
    			var index=$("#tabs-" + id).index();
				if (index == -1){
     				addTab(id,jspPage,label); 				     				     				     	
     				$tabs.tabs({ active: $("#tabs-" + id).index()});
     				
     				//change help doc
     				changehelppage(id,label);
				}			
				else {
					$tabs.tabs({ active: index});
					 
					//change help doc
     				changehelppage(id,label);
				}
				
				event.preventDefault();
 		});

		$("#ctr").click(function(){
			 var $ac=$("#ac").toggle();
			 if($ac.is(":visible"))	
			 {
				 $(this).css("left","180px");
				 $("#tabc").css("left","190px");
			 }
			 else
			 {
				 $(this).css("left","0px");
				 $("#tabc").css("left","10px");
			 }			 
		});
		$("#accordion tr").mouseover(  function(){  
			    	$("#accordion tr").each(function(k,v){
			    		$(this).removeClass("alt");  
			    		
			    	});
			        $(this).addClass("alt");  
			        
			        
			    }  
			);/* .mouseout(  
			    function(){  
			    	$(this).removeClass("alt");  
			    }  
			);  	 */
			
		$accordion.accordion({
 			  activate: function(event, ui) {
					/* var contextPath = window.location.pathname;//.split("/")[1]; */		
					var obj = new Object();					
					var index = $("#accordion>h3").index(ui.newHeader);
					obj.index=index;
					obj.test="test";
					var cookiename=userid+"_"+"current_accordion_item";					
					$.cookie(cookiename,obj , {expires:7}  );
			  } 
		});
			
		$tabs.tabs({
			  activate: function(event, ui) {
				  
				  var active = $("#tabs").tabs("option", "active");
		         //alert($("#tabs ul>li a").eq(active).attr('href')); 
		          var id = $("#tabs ul>li a").eq(active).attr('href');
		          id = id.replace('#content','');
		          var label = $("#tabs ul>li a").eq(active).text();
		          
		        
		          changehelppage(id,label);
		          
					/* var contextPath = window.location.pathname;//.split("/")[1]; */		
					/* var obj = new Object();					
					var index = $("#accordion>h3").index(ui.newHeader);
					obj.index=index;
					obj.test="test";
					var cookiename=userid+"_"+"current_accordion_item";					
					$.cookie(cookiename,obj , {expires:7}  ); */
			  } 
		});
		
	});
	function test()
	{
		alert("ok");
	}
	</script>
	
	 <script>
	 $(function() {
	 $("#changePass").click(function(){	 
	  
		 $( "#oldPassWord" )[0].value = "";
		 $( "#newPassWord" )[0].value = "";
		 $( "#confirmPassWord" )[0].value = "";
		 $("#spanMsg").html("");
		 
		 
			$( "#dialogChangePassWord" ).dialog({
				resizable: false,
				height:300,
				width:400,
				modal:false,
				buttons: {
				"登録": function() {
				 
					 var newPass =$( "#newPassWord" ).val();
					 var rePass =$( "#confirmPassWord" ).val();
					 
					 var diag = $( this );
					 
					 if (newPass != rePass ||  newPass.length ==0 )
					 { $("#spanMsg").html("新しいパスワードは誤りを入力します");}
					 else{
					   $.ajax({
					        type: "POST",
					        async: true,					        
					        url:"changePassWord.action",
					        data:$('#dataForm').serialize(),			         
							success: function (data) {
							 	if (data.msg ==""){ 
									diag.dialog( "close" );	
								}
								else{									
									$("#spanMsg").html(data.msg);
								}
							 },
					        error: function (err) {
								alert(err);
					        }
						});		
					 }
				},
				"キャンセル": function() {
					$( this ).dialog( "close" );
				}
				}
				});			
		});  		 
	 });
</script>

     <script>
      
     function changehelppage(pageid,title)
     {    	 
        
         if (title.length>0){
        	 title += '－ヘルプ';
        	 
         }else{
        	 title = 'ヘルプ';
         }
         
  		  $("#dialoghelp").load("./helpDoc/" + pageid +".html");
		  $( "#dialoghelp" ).attr("title",title );
		 
		  //change div span text help's title
		  $("#dialoghelp").prev("div").find("span.ui-dialog-title").text(title);
		  
     }
     
     $(function() {
    	 $("#help").click(function(){    	  
    	 	   if ($( "#dialoghelp" ).attr("title")=="ヘルプ" ){
    	 		   return;
    	 	   }
    	 	  
    	 	  
    			$( "#dialoghelp" ).dialog({
    				 
    				height:640,
    				width:660,
    				resizable: true,
    				position:["right","bottom"],
    				closeOnEscape:true,
    				modal:false,
    				cache: false});
    		});  		 
    	 });
    </script>
    
    <script>
    $(function() {
    	
    	 
		
  
    	 // $("#tabc").load("wellcom.action");
    });
    </script>
</head>
<body>
	<div style="background:#deedf7;height:58px;border:1px solid #deedf7">
		 <img src="./img/logo.png" height =50 style='position:absolute; left:200px;top:5px'></img>
		 <%-- <s:text name="sysInfo"  cssStyle="width:125px;" ></s:text>   --%>
	
	   	　<a id="help" class="userrange help" href="#" style="color:#FF7F00;">ヘルプ</a>
	   		 
		 <a id="changePass" class="userrange changePass" href="#">パスワード変更</a>

		 <a class="userrange logout" href="/PMData/login!logout.action">ログアウト   </a>
	
		 <!-- <lable class="userrange split">|</lable> -->		 
		 <label class="userrange user">${User.getUserName()}</label> 		 		 
		 <label class="userrange welcom"> アカウント:</label>
	</div>	
	
	<div id="ac">
		<div id="accordion">
			<%
			ValueStack vs=(ValueStack)request.getAttribute( "struts.valueStack" );
			Object navs = vs.findValue("navigations");
			if(navs!=null){
				List<ModelNavigation> list=(List<ModelNavigation>)navs;
				for(ModelNavigation nav : list){  				
			  		out.println("<h3>" + nav.getNavMenuName()  + "</h3>"  );  	
			  		out.println("<div> <table>");
			   		for( ModelNavigationItem navi : nav.getItems()){
			   			out.println("<tr ><td>");
			   			/* out.println("<img src='../img/table.png' width = 20 height=20></img>"); */    		
			   			out.println("<img src='" + navi.getIcoName() + "' width = 20 height=20></img>"); 
			  			out.println("<a id=" + navi.getId() +" href='" +navi.getAction()+"'>" + navi.getName()+ "</a>");
			  			String memo=navi.getMemo() == null ? "这里输入查询的简要说明" : navi.getMemo();
			  			out.println("<p>" + memo + "</p>");		
			  			out.println("<hr>");
			  			out.println("</td></tr>");  			
			   		}										
			   		out.println("<tr><td></td></tr>");
			   		out.println("</table></div>");
				}
			}		%>							
		</div>
	</div>
	<div id="ctr">
		<div id="ctrb" ></div>
	</div>
	<div id="tabc">
		<div id="tabs" style="margin:0px;padding:0px;"> 
			<ul></ul>
		</div>
	</div>
	
	<div id="dialogChangePassWord" title="パスワード変更" style="display:none;" >
	<s:form id="dataForm" theme="simple" >	
	  <table style="white-space:nowrap"  >
		<tr>
		 	<th>古いパスワード</th>
		 	<td><s:password id="oldPassWord" name="oldPassWord" />  
		 	</td>
	 	</tr>
	 	<tr>
		 	<th>新しいパスワード</th>
		 	<td><s:password id="newPassWord" name="newPassWord"  /></td>
		</tr>
		<tr>
		 	<th>パスワード確認</th>
		 	<td>
		 		<s:password id="confirmPassWord" name="confirmPassWord"  /> 
		 	</td>
		</tr>
		<tr>
		  
		 	<td colspan= 2> 
		 		<span id="spanMsg"></span>
		 	</td>
		</tr>
		
	  </table>
	  </s:form>
	</div>
	
	
	<div id="dialoghelp" title="ヘルプ"  style="display:none;" ></div>
</body>
</html>